


$(function (){
    $('#SearchBox').on('keyup',function(){
        var keyword = $(this).val();
        console.log(keyword);

        if(keyword !==''&& keyword !==null &&keyword.length !==0)
        {
            $.ajax({
                type    : 'GET',
                url     :'productAutoComplete?keyword='+keyword,
                dataType:"json",
                contextType:"application/json;charset=UTF-8",
                success : function (data){
                    console.log(data);

                    //动态渲染搜索结果
                    var productListHTML = '';
                    for( var i = 0 ; i<data.length; i++){
                        productListHTML +='<li class="productAutoItem" data-productid="'
                        productListHTML += data[i].productId;
                        productListHTML += '">' ;
                        productListHTML +=data[i].name;
                        productListHTML +='</li>';
                    }
                    $('#productList').html(productListHTML);
                    $('#productAutoComplete').show();



                },
                error   :function (errorMsg){console.log(errorMsg);}


            });
        }
        else{
            $('#productAutoComplete').hide();
        }


    });

    $(document).on('click','.productAutoItem',function (){
        var productid = $(this).data('productid');
        console.log(productid);
        $('#productAutoComplete').hide();
        $('#SearchBox').val('');
        window.location.href = 'viewProduct?productId='+productid;
    });

    $('#productAutoComplete').on('mouseleave',function (){
        $(this).hide();
        $('#SearchBox').val('');
    })

});
